<template>
    <!-- 新增编辑弹窗 -->
    <el-dialog v-model="dialogUserRole" @close="cancel" width="900px">
      <template #header>
        <div class="header-title">添加业务费</div>
      </template>
      <el-form :model="form" :rules="rules" ref="formRef" label-width="auto">

            <el-form-item label="业务类别" prop="refCategory">
              <el-radio-group v-model="form.refCategory">
                <el-radio :value="5">线上业务</el-radio>
                <el-radio :value="10">线下业务</el-radio>
              </el-radio-group>
            </el-form-item>                     
               <el-form-item label="箱号" prop="containerNosList">
                  <div v-for="(item, index) in containerNosList" :key="index" style="width: 100%;margin-bottom: 20px;">
                    <el-input v-model.trim="item.nos" placeholder="请输入箱号格式为前3位大写字母+U+7位数字" maxlength="11" style="width: 90%;" />
                    <el-icon style="margin-left: 15px;" color="#2158F3" @click="removeGui(index)"><RemoveFilled /></el-icon>
                  </div>
                  
                    <div class="tatle-list" style="display: flex; align-items: center; ">
                    <el-button type="primary" @click="addGui">新增箱号</el-button>
                  </div>
              </el-form-item>
              
              <el-row>
                <el-col :span="8">
                  <el-form-item label="业务编号" prop="businessNo">
                    <el-input v-model.trim="form.businessNo" placeholder="请输入业务编号" maxlength="50" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="提箱日期" prop="outDate">
                        <el-date-picker v-model="form.outDate" style="width: 100%;" type="date" placeholder="请选择日期" clearable />
                  </el-form-item>
                </el-col>
                 <el-col :span="8">
                   <el-form-item label="还箱日期" prop="returnDate">
                    <el-date-picker v-model="form.returnDate" style="width: 100%;" type="date" placeholder="请选择日期" clearable />
                  </el-form-item> 
                </el-col>
              </el-row> 
            <div v-if="form.refCategory==10">
              <el-row>
                 <el-col :span="8">
                   <el-form-item label="业务类型" prop="refType">
                        <el-select v-model="form.refType" clearable style="width: 100%;" placeholder="请选择业务类型">
                          <el-option
                              v-for="item in dictList.refTypeList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                          />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                   <el-form-item label="外调箱东公司名称" prop="outBoxCompanyName">
                      <el-input v-model.trim="form.outBoxCompanyName" placeholder="请输入外调箱东公司名称" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                   <el-form-item label="货代公司名称" prop="agentName">
                        <el-input v-model.trim="form.agentName" placeholder="请输入货代公司名称" />
                    </el-form-item>
                </el-col>
              </el-row> 
              <el-row>
                <el-col :span="8">
                  <el-form-item label="出发城市" prop="carryCityId">
                    <el-select ref="carryCityRef" v-model="form.carryCityName" @change="carryCityIdChang" filterable clearable  placeholder="请选择出发城市">
                              <el-option
                                  v-for="item in cityList"
                                  :key="item.id"
                                  :label="item.cityCName"
                                  :value="{ value: item.id, label: item.cityCName}"                                                      
                              />
                            </el-select> 
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="还箱城市" prop="returnCityId">
                      <el-select ref="returnCityRef" v-model="form.returnCityName" @change="returnCityIdChang" filterable clearable  placeholder="请选择还箱城市">
                                <el-option
                                    v-for="item in cityList"
                                    :key="item.id"
                                    :label="item.cityCName"
                                    :value="{ value: item.id, label: item.cityCName}"                                                      
                                />
                              </el-select>
                    </el-form-item>
                </el-col>
                 <el-col :span="8">
                  <el-form-item label="堆场名称" prop="yardId">
                    <div style="width: 100%;">
                          <yardSelect v-model="form.yardName" :selectName="'yardName'" :refResh="true" :boxEastYardId="form.yardId" :yardName="form.yardName" :needInfo="true" @yardId="yardInfoData" :placeholder="'请输入堆场名称'"></yardSelect>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row> 
              <el-row>              
                <el-col :span="8">
                  <el-form-item label="箱源" prop="containerClassify">
                    <el-select v-model="form.containerClassify" clearable style="width: 100%;" placeholder="请选择箱源">
                        <el-option
                            v-for="item in dictList.containerClassifyList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                      </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="箱状态" prop="boxState">
                    <el-select v-model="form.boxState" clearable style="width: 100%;" placeholder="请选择箱状态">
                        <el-option
                            v-for="item in dictList.boxStateList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                      </el-select>
                  </el-form-item>
                </el-col>
                 <el-col :span="8">
                  <el-form-item label="箱型" prop="boxType">
                    <el-select v-model="form.boxType" clearable style="width: 100%;" placeholder="请选择箱型">
                        <el-option
                            v-for="item in dictList.boxTypeInfo"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                      </el-select>
                  </el-form-item>
                </el-col>
              </el-row> 
              <el-row>
                
                <el-col :span="8">
                  <el-form-item label="箱况" prop="boxCondition">
                    <el-select v-model="form.boxCondition" clearable style="width: 100%;" placeholder="请选择箱况">
                        <el-option
                            v-for="item in dictList.boxConditionInfo"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                      </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="入场日期" prop="inDate">
                        <el-date-picker v-model="form.inDate" type="date" style="width: 100%;" placeholder="请选择日期" clearable />
                  </el-form-item>
                </el-col>
                   <el-col :span="8">
                   <el-form-item label="箱使期" prop="boxUsagePeriod">
                      <el-input v-model.trim="form.boxUsagePeriod" placeholder="请输入箱使期" />
                  </el-form-item>
                </el-col>
              </el-row>           
              <el-row>             
                <el-col :span="8">
                 <el-form-item label="超期一天的费用" prop="overdueFeeDay" >
                  <div class="input-sel" style="display: flex;">
                    <el-select v-model="form.overdueFeeCurrency" style="width: 100px" placeholder="请选择">
                            <el-option
                                v-for="item in feeCurrencyList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                          </el-select>
                      <el-input :formatter="formatterNumberKo" :parser="formatterNumberKo" v-model.trim="form.overdueFeeDay" style="width: 300px" placeholder="请输入" maxlength="20" />
                    </div>
                  </el-form-item>
                </el-col>             
              </el-row>
              <el-row>
                 <el-col :span="24">
                   <el-form-item label="备注" prop="remark">
                      <el-input
                          v-model="form.remark"
                          :rows="3"
                          show-word-limit
                          :formatter="containsEmoji"
                          maxlength="100"
                          type="textarea"
                          placeholder="请输入备注信息"
                        />
                  </el-form-item>
                </el-col>                           
              </el-row>
            </div>
         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button @click="cancel()">关闭</el-button>
               <el-button type="primary" @click="submitForm(formRef)">保存</el-button>
            </div>
         </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import { Refresh } from '@element-plus/icons-vue'
import { insertManualFeeBusinessDetails} from '@/api/financial/operating'
import type { FormInstance, FormRules } from 'element-plus'
import yardSelect from '@/components/citySelect/yardSelect.vue';
import { formatDate,warTime,formatterNumberKo ,inputText,formatterNumber,containsEmoji} from '@/utils'
import dictList from '@/utils/dictList'

const feeCurrencyList=ref([
  {
    value:'CNY',
    label:'¥'
  },
  {
    value:'USD',
    label:'$'
  },
])
const containerNosList=ref([{nos:''}])
const cityList=ref([])//全部城市
const returnCityRef=ref()
const carryCityRef=ref()
onMounted(() => {
  cityList.value = JSON.parse(localStorage.getItem('cityList'))
})
//出发城市
const carryCityIdChang=(val)=>{
  carryCityRef.value.blur()
  if(val){
    form.value.carryCityId=val.value
    form.value.carryCityName=val.label
  }else{
    form.value.carryCityId=''
    form.value.carryCityName=''
  }

}
//到达城市
const returnCityIdChang=(val)=>{
  returnCityRef.value.blur()
  if(val){
    form.value.returnCityId=val.value
    form.value.returnCityName=val.label
  }else{
    form.value.returnCityId=''
    form.value.returnCityName=''
  }
}
const formRef=ref()
const dialogUserRole=ref(false) //弹框
const data = reactive({
  form: {
    refCategory:5,
    overdueFeeCurrency:'USD',
  },
  rules: {
    businessNo: [{ required: true, message: "业务编号不能为空", trigger: "blur" }],
// containerNosList: [
//       { required: true, trigger: "blur", message: "不能为空" },
//       { pattern:/^[A-Z]{3}U\d{7}$/, message: "箱号格式为 ABC+U+1234567", trigger: "blur" }
//     ],
    
    outDate: [{ required: true, message: "提箱日期不能为空", trigger: "blur" }],
    refType: [{ required: true, message: " 业务类型为空", trigger: "blur" }],
    companyName: [{ required: true, message: "箱东公司名称不能为空", trigger: "blur" }],
    outBoxCompanyName: [{ required: true, message: "外调箱东公司名称不能为空", trigger: "blur" }],
    agentName: [{ required: true, message: "货代公司名称不能为空", trigger: "blur" }],
    containerClassify: [{ required: true, message: "箱源不能为空", trigger: "blur" }],
    boxState: [{ required: true, message: "箱状态不能为空", trigger: "blur" }],
    boxType: [{ required: true, message: "箱型不能为空", trigger: "blur" }],
    yardId: [{ required: true, message: "堆场城市不能为空", trigger: "blur" }],
    carryCityId: [{ required: true, message: "出发城市不能为空", trigger: "blur" }],
    returnCityId: [{ required: true, message: "还箱城市不能为空", trigger: "blur" }],
    boxCondition: [{ required: true, message: "箱况不能为空", trigger: "blur" }],
    inDate: [{ required: true, message: "入场日期不能为空", trigger: "blur" }],
    boxUsagePeriod: [{ required: true, message: "箱使期不能为空", trigger: "blur" }],
    overdueFeeDay: [{ required: true, message: "超期一天的费用不能为空", trigger: "blur" }],
  }
});
const { form, rules } = toRefs(data);
const onShow = async (row) => {
  dialogUserRole.value = true  
}
// 堆场信息
const yardInfoData = (id: string, info: any) => {
  if (info) {
    form.value.yardName=info.yardName
    form.value.yardId=info.id
  }
}

//添加
const addGui=()=>{
  let obj={
        nos:'',
  }
  containerNosList.value.push(obj)
}

//移除
const removeGui=(index)=>{
  if(containerNosList.value.length==1){
      ElMessage.warning("至少保留一条数据");
      return false
    }else{
      containerNosList.value.splice(index, 1)
    }
}


const emits = defineEmits(['addMode'])
/** 提交按钮 */
const submitForm = (formEl: FormInstance | undefined) =>{
  if (!formEl) return
  formEl.validate(valid => {
   let dataForm=JSON.parse(JSON.stringify(form.value))
    if (valid) {

      let containerNos=[]

      containerNosList.value.forEach((item)=>{
        containerNos.push(item.nos)
      })

      dataForm.containerNos=containerNos
       insertManualFeeBusinessDetails(dataForm).then(response => {
         emits('addMode');
          ElMessage.success('添加成功');
          cancel();
        });
    }
  });
};
//关闭弹框
const cancel = () => {
  formRef.value.resetFields()// 重置数据
  containerNosList.value=[{nos:''}]
  dialogUserRole.value=false
}
defineExpose({ onShow })
</script>

<style scoped>
.choose-item-2 {
  margin-left: 20px;
}
.stust{
  padding:0 20px;
}
.choose-item-3 {
  display: block;
  margin-left: 20px;
}
.main-cent{
  padding: 0 10px;
}
.input-sel {
  border: 1px solid #C0C4CC; 
  border-radius: 4px;
  overflow: hidden;

}
.input-sel :deep(.el-input__wrapper) {
  box-shadow: none !important; /* 去掉阴影 */
  border-radius: 0; /* 去掉圆角 */
  border-left: 1px solid #C0C4CC; /* 默认下边框颜色 */
}
.input-sel :deep(.el-select__wrapper) {
  box-shadow: none !important; /* 去掉阴影 */
  border-radius: 0; 
}
.header-title{
  border-left: 4px solid #2158F3;
  padding-left: 8px;
  line-height: 18px;
}
</style>